<template>
    <el-form label-width="100px">
        <div v-if="bill.orderStatus === 0 || bill.orderStatus === 2 || bill.orderStatus === 3 || bill.orderStatus === 5">
            <v-form-title title="交易进度"/>
            <div class="transaction-progess-box">
                <div style="height: 200px;" class="transaction-progess" v-if="bill.orderStatus === 0">
                    <el-steps direction="vertical" :active="1">
                        <el-step title="达成交易"></el-step>
                        <el-step title="买方付款"></el-step>
                        <el-step title="卖方背书"></el-step>
                        <el-step title="核验解冻"></el-step>
                    </el-steps>
                </div>
                <div style="height: 200px;" class="transaction-progess" v-if="bill.orderStatus === 2">
                    <el-steps direction="vertical" :active="2">
                        <el-step title="达成交易"></el-step>
                        <el-step title="买方付款"></el-step>
                        <el-step title="卖方背书"></el-step>
                        <el-step title="核验解冻"></el-step>
                    </el-steps>
                </div>
                <div style="height: 200px;" class="transaction-progess" v-if="bill.orderStatus === 3">
                    <el-steps direction="vertical" :active="3">
                        <el-step title="达成交易"></el-step>
                        <el-step title="买方付款"></el-step>
                        <el-step title="卖方背书"></el-step>
                        <el-step title="核验解冻"></el-step>
                    </el-steps>
                </div>
                <div style="height: 200px;" class="transaction-progess" v-if="bill.orderStatus === 5">
                    <el-steps direction="vertical" :active="4">
                        <el-step title="达成交易"></el-step>
                        <el-step title="买方付款"></el-step>
                        <el-step title="卖方背书"></el-step>
                        <el-step title="核验解冻"></el-step>
                    </el-steps>
                </div>
                <div class="transaction-right-help">
                    <p><span class="transaction-right-span-time">{{this.bill.createTime}}</span></p>
                    <p>
                        <span class="transaction-right-span-help" @mouseenter="enter()" @mouseleave="leave()" v-if="bill.orderStatus === 0">小贴式</span>
                        <span class="transaction-right-span-time" v-if="bill.orderStatus === 2 || bill.orderStatus === 3 || bill.orderStatus === 5">{{this.bill.pay_time}}</span>
                    </p>
                    <p>
                        <span class="transaction-right-span-help" @mouseenter="enter()" @mouseleave="leave()" v-if="bill.orderStatus === 2">小贴式</span>
                        <span class="transaction-right-span-time" v-if="bill.orderStatus === 3 || bill.orderStatus === 5">{{this.bill.endorse_time}}</span>
                    </p>
                    <p class="transaction-right-help-p5">
                        <span class="transaction-right-span-help" @mouseenter="enter()" @mouseleave="leave()" v-if="bill.orderStatus === 3">小贴式</span>
                        <span class="transaction-right-span-time" v-if="bill.orderStatus === 5">{{this.bill.success_time}}</span>
                    </p>
                </div>
                <!--<i class="tr-remind-time"><i class="iconfont icon-daojishi"></i>剩余操作时间 17:50</i>   v-if="isShowHelp"-->
                <!--<div class="transaction-remind">-->
                    <!--<p><span class="tr-remind-title">小贴士</span></p>-->
                    <!--<p class="tr-remind-con">执剑人账户中冻结金额显示交易金额后，从背书人的ECDS背出票据。企业同名户背书交易完成系统自动核验，非同名户背书需人工核验，需请会员提前告知掌柜，并且请掌柜及时联系汇票线客服人员。</p>-->
                <!--</div>-->
                <div class="transaction-success account-success-box" v-if="bill.orderStatus === 5">
                    <i class="iconfont icon-wancheng"></i>
                    <div class="account-success-box-word">
                        <h4>恭喜您交易完成</h4>
                        <span>如需下载合同请点击下方按钮!</span>
                        <p style="margin-top: 10px">
                            <el-button type="primary" @click="downloadCompact()">下载合同</el-button>
                            <el-button type="primary" @click="putForward()">提现</el-button>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <v-form-title title="票据图片"/>
        <el-form-item label="">
            <div class="img-box dfr">
                <div class="item" v-for="item in images" :key="item.value">
                    <p>{{item.label}}</p>
                    <div class="bd">
                        <img @click="priviewImage(item.value)" :src="item.value" alt="">
                    </div>
                </div>
            </div>
        </el-form-item>
        <v-form-title title="票面信息"/>
        <div class="line-item">
            <el-form-item label="票据号">{{bill.billNumber}}</el-form-item>
            <el-form-item label="到期日">{{bill.expiryDate}}</el-form-item>
        </div>
        <div class="line-item">
            <el-form-item label="票面金额">{{bill.faceValue}}元</el-form-item>
            <el-form-item label="承兑人">{{bill.acceptor}}</el-form-item>
        </div>
        <div class="line-item">
            <el-form-item label="承兑人行号">{{bill.acceptorLineNumber}}</el-form-item>
            <el-form-item label="瑕疵情况">{{bill.billFlawNames?bill.billFlawNames.toString():''}}</el-form-item>
        </div>
        <!--<div class="drf line-item">-->
            <!--<el-form-item label="承兑人行号">{{bill.acceptorLineNumber}}</el-form-item>-->
            <!--<span></span>-->
        <!--</div>-->
        <!--<div class="line-item">-->
            <!--<el-form-item label="瑕疵情况">{{bill.billFlawNames?bill.billFlawNames.toString():''}}</el-form-item>-->
            <!--<span></span>-->
        <!--</div>-->
        <v-form-title title="询价信息"/>
        <div v-if="bill.biddingMethod===0">
            <div class="drf line-item">
                <el-form-item label="竞价方式">{{bill.biddingMethodName}}</el-form-item>
                <el-form-item label="发布期限">T + {{bill.releaseDeadline}}天</el-form-item>
            </div>
            <div class="drf line-item">
                <el-form-item label="年化率">{{bill.annualInterestRate}}%</el-form-item>
                <el-form-item label="每十万扣款">{{bill.billEveryDeduction}}元</el-form-item>
            </div>
            <div class="drf line-item">
                <el-form-item label="贴息额">{{bill.discountAmount}}元</el-form-item>
                <el-form-item label="转让额">{{bill.transferAmount}}元</el-form-item>
            </div>
            <div class="drf line-item">
                <el-form-item label="创建时间">{{bill.createTime}}</el-form-item>
                <span></span>
            </div>
        </div>
        <div v-else>
            <div class="drf line-item">
                <el-form-item label="竞价方式">{{bill.biddingMethodName}}</el-form-item>
                <el-form-item label="发布期限">T + {{bill.releaseDeadline}}天</el-form-item>
            </div>
            <el-form-item label="创建时间">{{bill.createTime||bill.billCreateTime}}</el-form-item>
        </div>
        <slot></slot>

        <div v-if="roleType ===1 || roleType ===2">
            <v-form-title title="票据信息"/>
            <div v-if="roleType===1">
                <div class="drf line-item">
                    <el-form-item label="渠道专员">{{billInfo.channelCommissionUser}}</el-form-item>
                    <el-form-item label="渠道商">{{billInfo.channelDealerUser}}</el-form-item>
                </div>
                <div class="drf line-item">
                    <el-form-item label="渠道业务员">{{billInfo.salesmanUser}}</el-form-item>
                    <el-form-item label="企业会员">{{billInfo.enterpriseUser}}</el-form-item>
                </div>
            </div>
            <el-form-item>
                <v-plain-step :step="step"></v-plain-step>
            </el-form-item>
        </div>

    </el-form>
</template>

<script lang="ts">
  import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
  import vFormTitle from '@/components/form-title'
  import { Getter } from 'vuex-class'
  import vPlainStep from '@/components/plain-step'

  @Component({
    components: {
      vFormTitle, vPlainStep
    }
  })
  export default class BillDetail extends Vue {
    @Prop({
      default: () => ({
        userHierarchiesDto: {}
      })
    }) bill

    @Prop() billInfo

    @Getter userInfo
    step = []

    get roleType () {
      return this.userInfo.roleType
    }

    get images () {
      return [
        {
          label: '票据正面图片',
          value: this.bill.billFrontView,
        },
        {
          label: '票据背面图片1',
          value: this.bill.billEndorsementOne,
        }, {
          label: '票据背面图片2',
          value: this.bill.billEndorsementTwo,
        }, {
          label: '票据背面图片3',
          value: this.bill.billEndorsementThree,
        }
      ].filter(v => v.value)
    }

    priviewImage (src) {
      window.open(src)
    }

    @Watch('bill')
    watchBillDetail () {
      if (this.roleType === 1 || this.roleType === 2) {
        this.getOperationRecord()
      }
    }
    // 提现
    putForward () {
        window.open(this.xingyeURL);
    }
    // 下载合同
    downloadCompact () {
        // console.log(this.bill.id)
        this.getDownload()
    }
    compactText
    async getDownload () {
        let downToken = window.sessionStorage.getItem('token')
        // console.log(this.downloadURL+`/gateway/channel/eContract/download/${this.bill.id}`+`?token=${downToken}`)
        // console.log(`${window.location.origin}/g`+`/gateway/channel/eContract/download/${this.bill.id}?token=${downToken}`)
        let downURL = `${window.location.origin}/g`+`/gateway/channel/eContract/download/${this.bill.id}?token=${downToken}`
        window.location.href = downURL
    }
    // isActive = 3
    isShowHelp = false

    async enter () {
        this.isShowHelp = true
    }
    async leave () {
        this.isShowHelp = false
    }


    async getOperationRecord () {
      let res: AjaxResponse = await  this.$axios.post('b/boms/bill/operationrecord', {
        billId: this.bill.billId || this.bill.id
      })
      if (res.responseCode === 200) {
        this.step = res.data.map(v => {
          return {
            subTitle: v.createTime,
            title: v.operateDescription
          }
        })
      }
    }
    // mounted () {
    //     console.log(this.bill)
    // }
  }
</script>

<style scoped lang="less">
    .img-box {
        justify-content: space-around;
        .item {

        }

        .bd {
            border: 1px solid #ddd;
            width: 260px;
            height: 190px;
            text-align: center;
            line-height: 190px;
        }
        p {
            text-align: center;
            color: #666;
            font-size: 14px;
        }
        img {
            width: 80%;
            max-height: 80%;
            cursor: pointer;
            vertical-align: middle;
        }
    }

    .line-item {
        > * {
            width: 49.5%;
            display: inline-block;
        }
    }
    .tr-remind-title {
        color: #303133;
        margin-right: 25px;
    }
    .tr-remind-time {
        color: #f00;
        font-size: 14px;
    }
    .tr-remind-con {
        margin-top: 10px;
        color: #666;
        font-size: 14px;
        line-height: 20px;
    }
    .account-success-box {
        display: flex;
        margin: 30px 0 30px 30px;
    }
    .account-success-box-word h4 {
        color: #333;
        font-size: 30px;
        margin-bottom: 6px;
    }
    .account-success-box-word span {
        color: #666;
    }
    .icon-wancheng {
        color: #46b87f;
        font-size: 42px;
        margin-right: 14px;
    }
    .transaction-right-help {
        margin-right: 140px;
    }
    .transaction-right-help p {
        line-height: 28px;
        padding-bottom: 27px;
        text-align: center;
    }
    .transaction-right-help-p5 {
        padding-top: 3px;
    }
    .transaction-right-span-time {
        color: #999;
        font-size: 14px;

    }
    .transaction-right-span-help {
        color: #4E93FF;
        font-size: 14px;
        background:rgba(242,246,249,1);
        display: inline-block;
        width: 117px;
        height: 24px;
        border: 1px solid #4E93FF;
        text-align: center;
        line-height: 24px;
        border-radius: 12px;
    }
</style>
<style lang="less">
    .transaction-progess {
        width: 116px;
        .el-step__main{
            display: flex;
        }
        /*.el-step__description {*/
            /*margin-left: 20px;*/
            /*width: 117px;*/
            /*height: 24px;*/
            /*border: 1px solid;*/
            /*text-align: center;*/
            /*line-height: 24px;*/
            /*border-radius: 12px;*/
        /*}*/
     }
     .transaction-progess-box {
        display: flex;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        padding: 20px 160px;
     }
     .transaction-remind {
        width: 400px;
        height: 160px;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 30px 25px;
        margin-top: 20px;
     }
     .transaction-progess {
         .el-step__icon-inner {
             display: none;
         }
         .el-step__icon {
            width: 8px;
            height: 8px;
         }
         .el-step.is-vertical .el-step__line {
            left: 3px;
            top: 8px;
            height: 58px;
         }
     }

</style>